<template>
  <div class="mocks-listen-main">
    <div class="listen-left">
      <div class="sl-inner">
        <div class="sl-head">
          <div class="img"></div>
        </div>
        <!--音乐播放控件-->
        <audio data-type="audio" :src="partInfo.video_url" @canplay="handleAudioCanplay" ref="audio" preload="auto"></audio>
        <!--<audio data-type="audio" :src="partInfo.video_url" ref="audio" autoplay controls></audio>-->
        <div class="control-prop layui-clear">
          <!--<span class="begin-time" v-html="showPlayedTimeFormat"></span>-->
          <!--<span class="total-time" v-html="showDurationFormat"></span>-->

          <span class="begin-time" v-html="showTimeFormat(playedTime)"></span>
          <span class="total-time" v-html="showTimeFormat(audioDuration)"></span>
        </div>
        <div class="audio-progress">
          <div class="progress-slider"></div>
          <div class="progress-bg" :style="progressStyle"></div>
        </div>
      </div>
    </div>
    <div class="listen-right">
      <div class="lr-wrap">
        <div class="lr-inner">
          <div class="lr-tips" v-if="readingTime > 0">请先阅读题目，<span class="color-red">{{readingTime}}</span> 秒后自动播放音频</div>
          <div class="lr-tips" v-else>请完成以下题目</div>
          <!--<div class="lr-tips">请先阅读题目，<span class="color-red">{{readingTime}}</span> 秒后自动播放音频</div>-->
          <div class="question-wrap">
            <ul class="item-lists" v-if="partInfo">
              <li class="item-list" v-for="(question, index) in partInfo.question_list">
                <danxuan v-if="question.question_type==1" :index="index + 1" :question="question"></danxuan>
                <tiankong v-if="question.question_type==4" :index="index + 1" :question="question"></tiankong>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Danxuan from '../components/danxuan/index';
  import Tiankong from '../components/tiankong/index';

  export default {
    name: "MocksListen",
    componentType: 'paperPartQuestion',
    props: {
      partInfo: Object
    },
    components: { Danxuan, Tiankong},
    data () {
      return {
        readingTime: 0,
        inv: 0,
        audioDuration: 0, // 音频播放总时长
        playedTime: 0, //当前播放时长
        played: null,
        playInv: 0,
        canplay: false
      }
    },
    created () {
      this.readingTime = parseInt(this.partInfo.reading_time); //准备时间
      this.inv = setInterval( () => {
        if (this.readingTime > 0) {
          this.readingTime --;
        } else {
          clearInterval(this.inv);
          if (this.canplay) {
            this._startPlayVideo();
          }
        }
      }, 1000);
    },
    mounted () {
    },
    destroyed () {
      clearInterval(this.inv);
    },
    computed:{
      progressStyle () {
        let res = {width: '0'};
        if (typeof this.audioDuration === 'number'&& this.audioDuration && typeof this.playedTime === 'number') {
          let _width = this.playedTime / this.audioDuration * 100;
          if (_width > 100) {
            _width = 100;
          }
          res.width = _width + '%';
        }
        return res;
      }
    },
    methods: {
      showTimeFormat (time) {
        let min = Math.floor(time / 60);
        let sec = Math.ceil(time % 60);
        let minStr = min > 9 ? '' + min : '0' + min;
        let secStr = sec > 9 ? '' + sec : '0' + sec;
        return `<i class="time-pack">${minStr}</i><i class="time-pack">${secStr}</i>`;
      },
      _startPlayVideo () {
        let $audio = this.$refs['audio'];
        $audio.play();
        this.playInv = setInterval( () => {
          let _timeRanges = $audio.played;
          this.playedTime = Math.ceil(_timeRanges.end(0));
          if (_timeRanges.end(0) >= this.audioDuration) {
            clearInterval(this.playInv);
          }
        }, 1000);
      },
      checkUserAnswer () {
        let $children = this.$children;
        if ($children && $children.length) {
          for (let i = 0; i < $children.length; i++) {
            if ($children[i].$options.componentType == 'question') {
              if($children[i].checkUserAnswer()) {
                return true
              }
            }
          }
        }
        return false;
      },
      getPartAnswer () {
        let $children = this.$children;
        let answers = [];
        if ($children && $children.length) {
          $children.forEach($child => {
            answers.push($child.getQuestionAnswer())
          });
        }
        return answers;
      },
      handleAudioCanplay () {
        let $audio = this.$refs['audio'];
        if ($audio) {
          this.audioDuration = $audio.duration;
          this.canplay = true;
        }
      }
    }
  }
</script>
